<template>
    <div class="theme">
        <el-radio-group v-model="radio1" @change="changeRadio">
            <div>
                <div :class="[radio1 == 'duck' ? 'active' : '']">
                    <span>暗黑主题</span>
                </div>
                <el-radio class="themeItem" label="duck" size="large" border>暗黑主题</el-radio>
            </div>
            <div>
                <div :class="[radio1 == 'default' ? 'active' : '']">
                    <span>默认主题</span>
                </div>
                <el-radio class="themeItem" label="default" size="large" border>默认主题</el-radio>
            </div>
            <div>
                <div :class="[radio1 == 'default' ? 'active' : '']">
                    <span>紫色主题</span>
                </div>
                <el-radio class="themeItem" label="purple" size="large" border>紫色主题</el-radio>
            </div>
        </el-radio-group>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
let radio1 = ref(localStorage.getItem("themeItem")) || ref('default')
const changeRadio = (arg: any) => {
    document.body.className = arg
    localStorage.setItem("themeItem", arg)
}
</script>
<style lang='less'>
.theme {
    width: 100%;
    height: 100%;
    padding: 20px;

    div {
        width: 100%;
        height: 100%;

        div {
            width: 15%;
            height: 100px;
            position: relative;
            margin-right: 20px;
            .themeItem {
                width: 100%;
                height: 100%;
                opacity: 0;
            }
            div {
                position: absolute;
                width: 100%;
                height: 100%;
                border-radius: 5px;
                display: flex;
                justify-content: center;
                align-items: center;
                background-image: linear-gradient(45deg, #2c3e50, #34495e);
                span {
                    color: #fff;
                    font-size: 25px;
                }
               
                &.active {
                    border: 3px solid #3d92e9;
                }

            }
            &:nth-child(2){
               div{
                background: linear-gradient(45deg,#ecf0f1,#bdc3c7);
               }
            }
            &:nth-child(3){
               div{
                background: linear-gradient(45deg,#9b59b6,#8e44ad);
               }
            }
        }
    }

}
</style>